<template>
  <div v-loading="detailInfoShow">
    <div class="requestAdd" v-if="!selectionMaterialShow">
      <!-- 筛选按钮 -->
      <div class="search-button" v-if="!addShow">
        <el-button
          class="btn submit"
          v-preventReClick
          v-if="pageType !== 'detail'"
          @click="handleAddSave(requestFormRef, 0)"
          ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
          >提交</el-button
        >
        <el-button
          class="btn save"
          v-preventReClick
          v-if="pageType !== 'detail'"
          @click="handleAddSave(requestFormRef, 6)"
          ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
          >存为草稿</el-button
        >
        <el-button class="btn direction" @click="handleBack"
          ><el-icon class="icon" color="#fff"> <Back /> </el-icon
          >返回</el-button
        >
      </div>
      <el-collapse v-model="activeNames">
        <!-- 基础信息 -->
        <el-collapse-item name="1" v-if="!addShow" class="transform-down">
          <template #title>
            <span class="circle"></span>
            <span class="collapse-title"
              >{{
                pageType !== "detail"
                  ? pageType === "add"
                    ? "新增"
                    : "编辑"
                  : ""
              }}出库信息</span
            >
          </template>
          <div class="request-info">
            <el-form
              :model="requestForm"
              ref="requestFormRef"
              :rules="queryRules"
              label-width="100px"
              v-enterToNext
              :disabled="pageType === 'detail'"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="出库编号：" label-width="110px">
                    <el-input
                      disabled
                      v-model="requestForm.deliveryApplyCode"
                      placeholder="自动获取"
                      clearable
                      style="width: 100%"
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="申请日期：" prop="applicantDate">
                    <el-date-picker
                      v-model="requestForm.applicantDate"
                      format="YYYY/MM/DD HH:mm:ss"
                      style="width: 100%"
                      class="search-input"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      type="datetime"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="申请人："
                    prop="applicantId"
                    label-width="140px"
                  >
                    <el-select
                      v-model="requestForm.applicantId"
                      placeholder="请选择"
                      clearable
                      style="width: 100%"
                      class="search-input"
                      @change="handleUserChange"
                    >
                      <el-option
                        v-for="dict in userList"
                        :key="dict.userId"
                        :label="dict.nickName"
                        :value="dict.userId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="申请部门：" label-width="120px">
                    <el-input
                      disabled
                      style="width: 100%"
                      v-model="requestForm.deptName"
                      placeholder="自动获取"
                      clearable
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="出库类型："
                    label-width="110px"
                    prop="deliveryType"
                  >
                    <el-select
                      v-model="requestForm.deliveryType"
                      placeholder="请选择出库类型"
                      clearable
                      style="width: 100%"
                      class="search-input"
                    >
                      <el-option
                        v-for="dict in outStatusList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="用途类型：">
                    <el-select
                      v-model="requestForm.deliveryUsageType"
                      placeholder="请选择用途类型"
                      clearable
                      style="width: 100%"
                      class="search-input"
                    >
                      <el-option
                        v-for="dict in deliveryStatusList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="最晚交付日期："
                    prop="latestDeliverDate"
                    label-width="140px"
                  >
                    <el-date-picker
                      v-model="requestForm.latestDeliverDate"
                      format="YYYY/MM/DD"
                      class="search-input"
                      value-format="YYYY-MM-DD"
                      type="date"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联请购单：" label-width="110px">
                    <el-autocomplete
                      popper-class="autoclass"
                      v-model="requestForm.requestName"
                      :fetch-suggestions="querySearchRequest"
                      placeholder="请选择"
                      @select="handleRequestSelect"
                      style="width: 100%"
                      clearable
                    >
                      <template #default="{ item }">
                        <div class="auto-top" style="display: flex">
                          <div style="display: flex; width: 200px">
                            请购编号
                          </div>
                          <div class="auto-item" style="width: 160px">
                            申请人
                          </div>
                          <div class="auto-item" style="width: 120px">
                            采购类型
                          </div>
                          <div class="auto-item" style="width: 140px">
                            关联项目
                          </div>
                        </div>
                        <div style="display: flex; width: 100%">
                          <div
                            class="auto-item"
                            :title="item.purchaseApplyCode"
                            style="display: flex; width: 200px"
                          >
                            {{ item.purchaseApplyCode }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 160px"
                            :title="item.applicantName"
                          >
                            {{ item.applicantName }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 120px"
                            :title="item.applicantTypeName"
                          >
                            {{ item.applicantTypeName }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 140px"
                            :title="item.projectName"
                          >
                            {{ item.projectName }}
                          </div>
                        </div>
                      </template>
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联项目：" label-width="140px">
                    <el-input
                      disabled
                      v-model="requestForm.projectName"
                      placeholder="自动获取"
                      style="width: 100%"
                      class="search-input"
                    />
                    <!-- <el-autocomplete
                      popper-class="autoclass"
                      v-model="requestForm.projectName"
                      :fetch-suggestions="querySearch"
                      placeholder="请选择"
                      @select="handleProjectSelect"
                      style="width: 100%"
                      clearable
                    >
                      <template #default="{ item }">
                        <div class="auto-top" style="display: flex">
                          <div style="display: flex; width: 200px">
                            项目编号
                          </div>
                          <div class="auto-item" style="width: 170px">
                            项目名称
                          </div>
                          <div class="auto-item" style="width: 140px">
                            项目类别
                          </div>
                          <div class="auto-item" style="width: 100px">
                            项目类型
                          </div>
                        </div>
                        <div style="display: flex; width: 100%">
                          <div
                            class="auto-item"
                            :title="item.projectCode"
                            style="display: flex; width: 200px"
                          >
                            {{ item.projectCode }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 170px"
                            :title="item.projectName"
                          >
                            {{ item.projectName }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 140px"
                            :title="item.projectCategoryName"
                          >
                            {{ item.projectCategoryName }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 100px"
                            :title="item.projectTypeName"
                          >
                            {{ item.projectTypeName }}
                          </div>
                        </div>
                      </template>
                    </el-autocomplete> -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联运维工单：" label-width="110px">
                    <el-autocomplete
                      popper-class="autoclass"
                      v-model="requestForm.workOrderName"
                      :fetch-suggestions="querySearchOperation"
                      placeholder="请选择"
                      @select="handleOperationSelect"
                      style="width: 100%"
                      clearable
                    >
                      <template #default="{ item }">
                        <div class="auto-top" style="display: flex">
                          <div style="display: flex; width: 140px">申请人</div>
                          <div class="auto-item" style="width: 140px">
                            申请部门
                          </div>
                          <div class="auto-item" style="width: 170px">
                            创建时间
                          </div>
                          <div class="auto-item" style="width: 180px">
                            工单名称
                          </div>
                        </div>
                        <div style="display: flex; width: 100%">
                          <div
                            class="auto-item"
                            :title="item.applicantName"
                            style="display: flex; width: 140px"
                          >
                            {{ item.applicantName }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 140px"
                            :title="item.deptName"
                          >
                            {{ item.deptName }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 170px"
                            :title="item.createTime"
                          >
                            {{ item.createTime }}
                          </div>
                          <div
                            class="auto-item"
                            style="width: 180px"
                            :title="item.workOrderName"
                          >
                            {{ item.workOrderName }}
                          </div>
                        </div>
                      </template>
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注：" label-width="110px">
                    <el-input
                      style="width: 100%"
                      v-model="requestForm.remarks"
                      placeholder=""
                      type="textarea"
                      clearable
                      maxlength="2000"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item
                    label="附件："
                    prop="businessLicense"
                    label-width="110px"
                  >
                    <Upload
                      :fileList="requestForm.fileList"
                      :isFull="true"
                      :isCanDelete="true"
                      :showButton="true"
                      :limit="10"
                      accept=".jpg,.png,doc,.docx"
                      @success="(result) => uploadSuccess(result, 1)"
                      @deleteFile="(result) => uploadRemove(result, 1)"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>

        <!-- 联系人列表 -->
        <el-collapse-item name="2" v-if="!addShow" class="transform-down">
          <template #title>
            <span class="circle"></span>
            <span class="collapse-title">收货地址</span>
          </template>
          <div class="request-info">
            <el-form
              :model="requestForm"
              label-width="100px"
              v-enterToNext
              :disabled="pageType === 'detail'"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item label="收货人：">
                    <el-input
                      v-model="requestForm.consignee"
                      placeholder=""
                      clearable
                      style="width: 100%"
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="手机号码：">
                    <el-input
                      v-model="requestForm.phone"
                      placeholder=""
                      clearable
                      style="width: 100%"
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="收货地址：">
                    <el-input
                      v-model="requestForm.deliveryAddress"
                      placeholder=""
                      clearable
                      style="width: 100%"
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>

        <!-- 添加物料 -->
        <el-collapse-item
          name="3"
          style="position: relative"
          :class="!addShow ? 'transform-down' : ''"
        >
          <template #title>
            <span class="circle"></span>
            <span class="collapse-title">物料列表</span>
            <div class="nofixed-search-button button-position">
              <el-button
                class="btn submit"
                @click.stop="handleMaterial"
                v-if="pageType !== 'detail'"
                ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                >选择物料</el-button
              >
            </div>
          </template>
          <div class="contact-info">
            <!-- 表格数据 -->
            <el-table
              :data="requestForm.deliveryRelationMaterialList"
              border
              :height="'320px'"
              :header-cell-style="{ 'text-align': 'center' }"
              show-summary
              sum-text="合计"
              :summary-method="getSummaries"
            >
              <!-- 操作模式 -->
              <el-table-column
                label="操作"
                align="center"
                :show-overflow-tooltip="true"
                width="100px"
              >
                <template #default="{ row, $index }">
                  <div class="table-operate">
                    <img
                      src="@/assets/icons/images/delete.png"
                      class="table-icon"
                      title="删除"
                      @click="handleOperate('delete', row, $index)"
                    />
                  </div> </template
              ></el-table-column>
              <el-table-column
                label="序号"
                type="index"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="物料编号"
                prop="materialCode"
                :show-overflow-tooltip="true"
                min-width="160"
              >
                <template #default="{ row }">
                  <span>{{ row.materialCode ? row.materialCode : "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="物料名称"
                prop="materialName"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="出厂型号"
                prop="factoryCode"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="技术参数"
                prop="technologyParameter"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="单位"
                prop="materialUnit"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="出库数量"
                prop="deliveryQuantity"
                min-width="160"
              >
                <template v-slot="scope">
                  <el-input v-model="scope.row.deliveryQuantity"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="供应商"
                prop="supplierName"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="生产厂商"
                prop="manufactureName"
                :show-overflow-tooltip="true"
                min-width="160"
              />
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <SelectionMaterial
      ref="selectionMaterialRef"
      v-if="selectionMaterialShow"
      v-model:selectionMaterialShow="selectionMaterialShow"
      @submitChoose="handleSelectMaterial"
    />
  </div>
</template>

<script setup>
import SelectionMaterial from "./selectionMaterial";
import Upload from "@/components/Upload/index";

import { getUserListApi } from "@/api/information/customer";
import { getProjectListApi } from "@/api/sales/project";
import { getRequestListApi } from "@/api/purchase/request";
import {
  addDeliveryApi,
  getDeliveryApplyApi,
  findMaterialList,
  editDeliveryApi,
  getUserInfo,
  maintenanceApply,
} from "@/api/stock/outorder";
import { getDictsApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";

const route = useRoute();
const emit = defineEmits([
  // 客户新增组件显隐
  "addShow",
  // 更新客户新增组件显隐
  "update:addShow",
  // 刷新父组件表格数据
  "refreshList",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});

// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);
// 客户表单引用
const requestFormRef = ref();

// 新增联系人表单显隐
const addShow = ref(false);
// 选择物料显隐
const selectionMaterialShow = ref(false);
// 详情加载效果
const detailInfoShow = ref(false);

// 出库类型列表
const outStatusList = ref([]);
//用途类型
const deliveryStatusList = ref([]);
// 项目列表
const projectList = ref([]);
// 请购单列表
const requestList = ref([]);
//运维工单列表
const operationList = ref([]);

// 客户表单数据模板
const requestFormTemplate = {
  deliveryApplyCode: "", //出库编号
  applicantDate: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), // 申请日期
  latestDeliverDate: "", //最晚申请日期
  applicantId: null, // 申请人id
  deliveryType: null, // 出库类型
  deliveryUsageType: null, //用途类型
  deptName: "", // 申请部门
  projectId: null, // 关联项目id
  projectName: "",
  purchaseApplyId: null, //关联请购单id
  maintenanceOrderId: null, //关联运维工单id
  requestName: "",
  remarks: "", //备注
  consignee: "", //收货人
  phone: "", //手机号码
  deliveryAddress: "", //收货地址
  fileList: [],
  deliveryRelationMaterialList: [],
};
// 联系人表单数据模板

const data = reactive({
  // 客户表单
  requestForm: JSON.parse(JSON.stringify(requestFormTemplate)),

  // 客户表单校验规则
  queryRules: {
    applicantDate: [
      { required: true, message: "请选择申请日期", trigger: "change" },
    ],
    applicantId: [
      { required: true, message: "请选择申请人", trigger: "change" },
    ],
    deliveryType: [
      { required: true, message: "请选择出库类型", trigger: "change" },
    ],
    latestDeliverDate: [
      { required: true, message: "请选择最晚交付日期", trigger: "change" },
    ],
  },

  // 用户列表
  userList: [],
});

const { requestForm, queryRules, userList } = toRefs(data);

/**
 * @description: 保存
 * @param {Object} requestFormRef 客户表单引用
 */
const handleAddSave = async (requestFormRef, approvalStatus) => {
  if (!requestFormRef) return;
  await requestFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (selectedData.length == 0) {
        ElMessage.error("请选择物料");
        return;
      }
      ElMessageBox.confirm(
        "确定" + (approvalStatus == 6 ? "存为草稿" : "提交") + "吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          confirmButtonClass: "confirmBtnClass",
          cancelButtonClass: "cancelBtnClass",
        }
      )
        .then(async () => {
          requestForm.value.approvalStatus = approvalStatus;
          let res;
          if (props.pageType === "add") {
            // 新增出库
            res = await addDeliveryApi(requestForm.value);
          } else {
            // 编辑出库
            res = await editDeliveryApi(requestForm.value);
          }
          if (res.code === 200) {
            emit("update:addShow", false);
            emit("refreshList", false);
            ElMessage.success(res.msg);
            requestForm.value = JSON.parse(JSON.stringify(requestFormTemplate));
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    }
  });
};

/**
 * @description: 返回
 */
const handleBack = () => {
  emit("update:addShow", false);
  emit("refreshList", false);
  requestForm.value = JSON.parse(JSON.stringify(requestFormTemplate));
};

/**
 * @description: 处理选择物料
 */
const handleMaterial = () => {
  selectionMaterialShow.value = true;
};

/**
 * @description: 处理物料选择
 */
let selectedData = [];
const handleSelectMaterial = (data) => {
  if (data.length > 0) {
    selectionMaterialShow.value = false;
    //限制每次选中的数据，为单条情况下
    // data.deliveryQuantity = 1;
    // data.deliveryMaterialId = data.materialId;
    // let indexMaterial = selectedData.findIndex(
    //   (item) => item.deliveryMaterialId === data.deliveryMaterialId
    // );
    // if (indexMaterial !== -1) {
    //   selectedData[indexMaterial].deliveryQuantity++;
    // } else {
    //   selectedData.push({ ...data, deliveryQuantity: 1 });
    // }
    //处理每次选中的数据，为多条情况下
    data.forEach((item) => {
      item.deliveryQuantity = 1;
      item.deliveryMaterialId = item.materialId;
      // 找到目标数组中是否有相同ID的数据
      const existingData = selectedData.find(
        (d) => d.deliveryMaterialId === item.deliveryMaterialId
      );
      if (existingData) {
        // 如果已经存在，则将数量加1
        existingData.deliveryQuantity++;
      } else {
        // 如果不存在，则将其插入到目标数组中
        selectedData.push(item);
      }
    });
    requestForm.value.deliveryRelationMaterialList = selectedData;
  } else {
    ElMessage.info("请选择物料");
  }
};

/**
 * @description: 关联项目下拉选择
 */
const handleProjectSelect = (value) => {
  requestForm.value.projectId = value.projectId;
  // requestForm.value.projectName = value.projectName;
};

const querySearch = (queryString, cb) => {
  // requestForm.value.projectId = null;
  // requestForm.value.projectName = "";
  // const results = projectList.value;
  const results = queryString
    ? projectList.value.filter(createFilter(queryString))
    : projectList.value;
  cb(results);
};
//---------------------------------------------------------
/**
 * @description: 关联请购单下拉选择
 */
const handleRequestSelect = (value) => {
  requestForm.value.purchaseApplyId = value.purchaseApplyId;
  // requestForm.value.requestName = value.purchaseApplyCode;

  // ------------带出所关联的项目
  requestForm.value.projectId = value.projectId;
  requestForm.value.projectName = value.projectName;
};

const querySearchRequest = (queryString, cb) => {
  // requestForm.value.purchaseApplyId = null;
  // requestForm.value.requestName = "";
  // const results = requestList.value;
  const results = queryString
    ? requestList.value.filter(createFilter(queryString))
    : requestList.value;
  cb(results);
};

//---------------------------------------------------------
/**
 * @description: 关联运维工单下拉选择
 */
const handleOperationSelect = (value) => {
  requestForm.value.maintenanceOrderId = value.workOrderId;
};

const querySearchOperation = (queryString, cb) => {
  const results = queryString
    ? operationList.value.filter(createFilter(queryString))
    : operationList.value;
  cb(results);
};
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
//---------------------------------------------------------

/**
 * @description: 选择申请人获取对应部门
 * @param {Number} value 选择值
 */
const handleUserChange = (value) => {
  if (value) {
    const selectUser = userList.value.find((item) => item.userId === value);
    if (selectUser) {
      requestForm.value.deptName = selectUser.dept.deptName;
    }
  } else {
    requestForm.value.deptName = "";
  }
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 */
function uploadSuccess(response) {
  requestForm.value.fileList.push({ ...response, fileName: response.name });
}

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 */
function uploadRemove(index) {
  requestForm.value.fileList.splice(index, 1);
}

/**
 * @description: 处理合计
 */
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    // 只对amount这一列进行总计核算。
    if (column.property === "deliveryQuantity") {
      if (!values.every((value) => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        // sums[index] = sums[index].toFixed(2); // 保留2位小数，解决小数列合计精度缺失的问题
        // sums[index] += "元";
      } else {
        sums[index] = "";
      }
    }
  });

  return sums;
};

/**
 * @description: 处理联系人表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperate = (type, row, tabIndex) => {
  ElMessageBox.confirm(
    "是否删除物料编号" + row.materialCode + "选中数据，是否继续？",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      confirmButtonClass: "confirmBtnClass",
      cancelButtonClass: "cancelBtnClass",
      type: "warning",
    }
  )
    .then(async () => {
      requestForm.value.deliveryRelationMaterialList.splice(tabIndex, 1);
    })
    .catch(() => {});
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  try {
    detailInfoShow.value = true;
    const res = await getDeliveryApplyApi(id);
    res.data.fileList.forEach((file) => {
      file.name = file.fileName;
      // delete file.fileName; //是否删除原文件名
    });
    const resTable = await findMaterialList({ deliveryApplyId: id });
    if (res && resTable) {
      requestForm.value = {
        ...res.data,
        requestName: res.data.purchaseApplyCode,
        deliveryRelationMaterialList: resTable.data,
      };
      selectedData = resTable.data;
    }
    detailInfoShow.value = false;
  } catch (error) {
    detailInfoShow.value = false;
  }
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  //出库类型
  await getDictsApi("erp_delivery_type").then((res) => {
    if (res.code === 200) {
      outStatusList.value = res.data;
    }
  });
  // 用途类型
  await getDictsApi("erp_delivery_usage_type").then((res) => {
    if (res.code === 200) {
      deliveryStatusList.value = res.data;
    }
  });

  // 项目列表
  await getProjectListApi({}, { approvalStatus: 3 }).then((res) => {
    if (res.code === 200) {
      res.rows.forEach((item) => {
        item.value = item.projectName;
      });
      projectList.value = res.rows;
    }
  });
  //关联请购单
  await getRequestListApi({}, { approvalStatus: 3 }).then((res) => {
    if (res.code === 200) {
      res.rows.forEach((item) => {
        item.value = item.purchaseApplyCode;
      });
      requestList.value = res.rows;
    }
  });

  //关联运维工单 { approvalStatus: 3 }
  await maintenanceApply().then((res) => {
    if (res) {
      res.forEach((item) => {
        item.value = item.workOrderName;
      });
      operationList.value = res;
    }
  });
  //申请人列表
  await getUserListApi({}).then((res) => {
    if (res.length > 0) {
      userList.value = res;
    }
  });
  // @description: 获取当前登录的用户信息

  if (props.pageType == "add" && route.name == "Outorder") {
    await getUserInfo({}).then((res) => {
      if (res.code == 200) {
        requestForm.value.applicantId = res.user.userId;
        requestForm.value.deptName = res.user.dept.deptName;
      }
    });
  }
}

onMounted(() => {
  getDicts();
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
.requestAdd {
  padding: 20px 20px;
  width: 100%;
  height: 100%;
  .request-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }

  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .search-input {
    width: 268px;
    height: 34px;
  }
  .image-content {
    width: 100%;
    line-height: 0px;
    overflow: auto;
  }
}
.auto-top {
  width: 96%;
  position: absolute;
  top: 0px;
  display: flex;
  font-weight: bold;
  background: #ffffff;
}
.auto-item {
  width: 25%;
  // text-align: center;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.el-autocomplete .el-autocomplete-suggestion {
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
}
</style>
